<template>
    <Drawer v-model:visible="isShowDrawer" title="详情" :loading="loading" :width="800" :closable="false"
        :bodyStyle="{ padding: 0 }" :destroyOnClose="true" @close="handleClose">
        <template #extra>
            <CloseOutlined @click="handleCancel" />
        </template>
        <Spin :spinning="loading" wrapperClassName="enterprise-spin">
            <div class="flex flex-col h-full">
                <div class="flex flex-row items-center p-6" v-if="userData">
                    <Image v-if="userData.head" :src="userData.head" :preview="false" />
                    <div v-else
                        class="flex items-center justify-center bg-[#0960bd] w-[100px] h-[100px] rounded text-white text-6xl font-bold">
                        {{ userData.name?.slice(0, 1) }}
                    </div>
                    <div class="flex flex-col flex-1 ml-5">
                        <span class="text-[#333] font-bold text-2xl">{{ userData.name }}</span>
                    </div>
                    <div class="flex flex-row gap-4">
                        <Button type="primary" @click="handleResetPwd()">重置密码</Button>
                    </div>
                </div>
                <div class="px-4 py-4 bg-[#f5f7fa] flex-1">
                    <div class="flex flex-col">
                        <div v-if="!curCompany && companyList?.length === 0" class=" p-8 my-4 bg-white text-center">暂无企业
                        </div>
                        <div class="flex flex-col items-start rounded p-4 my-4 bg-white" v-if="curCompany">
                            <span class="text-lg font-bold mb-2">当前企业</span>
                            <div
                                class="flex flex-row justify-between items-center w-full border-b border-[#eee] py-4 last:border-none">
                                <Image :src="curCompany.company?.logo || '/resource/images/default-agency-logo.png'"
                                    style="width: 48px;height: 48px;" class="flex rounded-full border" :preview="false">
                                </Image>
                                <div class="flex flex-col flex-1 ml-4 mr-8">
                                    <span class="text-base font-bold">{{ curCompany.company?.fullName }}</span>

                                    <div class="flex flex-row items-center gap-3 text-[#666] mt-1 text-sm">
                                        <span>姓名: {{ curCompany.user?.name }}</span>
                                        <span>任职: {{ curCompany.user?.jobName || curCompany.user?.position ||
                                            '--' }}</span>
                                    </div>
                                </div>
                                <div class="flex flex-col text-xs items-start mr-8">
                                    <span :class="curCompany.user?.isLock ? 'text-[#e62c25]' : 'text-[#13d0a1]'">
                                        状态: {{ curCompany.user?.isLock ? '冻结' : '正常' }}
                                    </span>
                                    <span class="text-[#666] mt-1">
                                        {{ convertTime(curCompany.user?.loginTime) || '--' }}
                                    </span>
                                </div>
                                <div class="flex flex-row gap-4">
                                    <Popconfirm :title="`确定${curCompany.user?.isLock ? '解除冻结' : '冻结'}吗?`" ok-text="确认"
                                        cancel-text="取消" @confirm="handleLock(curCompany.user!)">
                                        <Button type="primary" ghost>
                                            {{ curCompany.user?.isLock ? '解冻' : '冻结' }}
                                        </Button>
                                    </Popconfirm>
                                    <Popconfirm title="确定解除绑定吗?" ok-text="确认" cancel-text="取消"
                                        @confirm="handleDel(curCompany.user!)">
                                        <Button type="primary" ghost>解绑</Button>
                                    </Popconfirm>
                                    <Button type="primary" ghost @click="handleUser(curCompany)">编辑</Button>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-col items-start rounded p-4 bg-white"
                            v-if="companyList && companyList.length > 0">
                            <span class="text-lg font-bold mb-2">企业列表</span>
                            <template v-for="item in companyList" :key="item.company?.id">
                                <div class="flex flex-row justify-between items-center w-full border-b border-[#eee] py-4 last:border-none "
                                    v-if="item.company?.id !== companyId">
                                    <Image :src="item.company?.logo || '/resource/images/default-agency-logo.png'"
                                        style="width: 48px;height: 48px;" class="flex rounded-full border"
                                        :preview="false">
                                    </Image>
                                    <div class="flex flex-col flex-1 ml-4 mr-8">
                                        <span class="text-base font-bold">{{ item.company?.fullName }}</span>

                                        <div class="flex flex-row items-center gap-3 text-[#666] mt-1 text-sm">
                                            <span>姓名: {{ item.user?.name }}</span>
                                            <span>任职: {{ item.user?.jobName || item.user?.position || '--' }}</span>
                                        </div>
                                    </div>
                                    <div class="flex flex-col text-xs items-start mr-8">
                                        <span :class="item.user?.isLock ? 'text-[#e62c25]' : 'text-[#13d0a1]'">状态: {{
                                            item.user?.isLock ? '冻结' : '正常'
                                            }}</span>
                                        <span class="text-[#666] mt-1">{{ convertTime(item.user?.loginTime) || '--'
                                        }}</span>
                                    </div>
                                    <div class="flex flex-row gap-4">
                                        <Popconfirm :title="`确定${item.user?.isLock ? '解除冻结' : '冻结'}吗?`" ok-text="确认"
                                            cancel-text="取消" @confirm="handleLock(item.user!)">
                                            <Button type="primary" ghost>{{ item.user?.isLock ? '解冻' : '冻结' }}</Button>
                                        </Popconfirm>
                                        <Popconfirm title="确定解除绑定吗?" ok-text="确认" cancel-text="取消"
                                            @confirm="handleDel(item.user!)">
                                            <Button type="primary" ghost>解绑</Button>
                                        </Popconfirm>
                                        <Button type="primary" ghost @click="handleUser(item)">编辑</Button>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </Spin>
        <ResetPwdModal ref="resetRef" @ok="GetAssociationCompany" />
        <EditCompanyModal ref="editRef" @ok="handleEditOk" />
    </Drawer>
</template>

<script lang="ts" setup>
import { Drawer, message, Image, Button, Popconfirm, Spin } from 'ant-design-vue'
import { CloseOutlined } from '@ant-design/icons-vue'
import { CompanyQueryUserResult, CompanyUserApi, UserRegistrationCompanyUserResult, UserResult } from '@/api';
import ResetPwdModal from "./ResetPwdModal.vue";
import EditCompanyModal from "./EditModal.vue"
import { convertTime } from '@/utils/queryConversion'

const emit = defineEmits(['ok', 'cancel']);
const props = defineProps<{ userData: CompanyQueryUserResult }>()

watch(() => props.userData,
    val => {
        if (val) {
            userData.value = val;
            GetAssociationCompany(val.id!.toString());
        }
    })

const editRef = ref();
const resetRef = ref();
const isShowDrawer = ref(false)
const loading = ref(false)
const companyResult = ref<UserRegistrationCompanyUserResult[]>()
const curCompany = ref<UserRegistrationCompanyUserResult>()
// 成员列表
const companyList = ref<UserRegistrationCompanyUserResult[]>([])
const companyId = ref();
// 用户data
const userData = ref<CompanyQueryUserResult>(props.userData)

// 打开抽屉
const handleOpen = (data: CompanyQueryUserResult) => {
    companyId.value = data.companyId;
    isShowDrawer.value = true;
}
// 关闭抽屉
function handleClose() {
    emit('cancel')
}
const handleCancel = () => {
    emit('cancel')
    isShowDrawer.value = false;
}

// 是否冻结
async function handleLock(user: UserResult) {
    loading.value = true;
    try {
        // 冻结状态
        if (user.isLock) {
            // 解冻
            await CompanyUserApi.companyuserUnlockuser(user.id!.toString());
            message.success('解除成功')
        } else {
            // 冻结
            await CompanyUserApi.companyuserLockuser(user!.id!.toString());
            message.success('冻结成功')
        }
        GetAssociationCompany(userData.value.id!.toString())
    } catch (error) {
        console.log(error);
    } finally {
        loading.value = false;
    }

}

// 解绑
async function handleDel(user: UserResult) {
    loading.value = true;
    try {
        await CompanyUserApi.companyuserUnbinduser(user.id!.toString());
        message.success('解绑成功')
        GetAssociationCompany(userData.value.id!.toString())
    } catch (error) {
        console.log(error);
    } finally {
        loading.value = false;
    }

}

// 编辑成员
const handleUser = (user: UserRegistrationCompanyUserResult) => {
    editRef.value.handleOpen(userData.value.id, user);
}

// 编辑成员回调
function handleEditOk() {
    GetAssociationCompany(userData.value.id!.toString())
}

// 重置密码
function handleResetPwd() {
    resetRef.value.handleOpen(userData.value!.id)
}

// 获取关联企业
const GetAssociationCompany = async (id: string) => {
    loading.value = true;
    curCompany.value = undefined;
    companyList.value = [];

    try {
        let res = await CompanyUserApi.companyuserGetusercompanies(id.toString());
        companyResult.value = res;
        res.forEach(v => {
            if (v.isCurrentCompany) {
                curCompany.value = v;
            } else {
                companyList.value.push(v)
            }
        })
    } catch (error) {
        console.log(error);
    } finally {
        loading.value = false;
    }
}
defineExpose({ handleOpen })
</script>
<style lang="less" scoped>
.enterprise-spin {
    height: 100%;

    :deep(.ant-spin-container) {
        height: 100%;
    }
}
</style>